<template>
    <div class="baidu-audio">
        <div class="music-top" :class="[isfixed ? 'fixed' : '']" ref="musictop">
            <h1 class="h1">音乐轻轻听</h1>
            <div class="play-content">
                <div class="play-content-dev">
                    <div class="play-content-dev-player">
                        <div class="music-img-box">
                            <img :src="musicSmallImg ? musicSmallImg : dfImg" alt="">
                        </div>
                        <div class="music-cont-box">
                            <h2>
                                <span v-if="isMes">{{musicname}}</span>
                                <span v-else>{{songer}} - {{musicname}}</span>
                            </h2>
                            <audio class="audio" id="mp3play" ref="mp3play" controls autoplay :src="songurl">
                                <source :src="songurl" type="audio/mp3">
                                <source :src="songurl" type="audio/ogg">
                                Your browser does not support this audio format.
                            </audio>
                        </div>
                    </div>
                    <div class="play-content-dev-select">
                        <span class="select-txt">选择音乐类型：</span>
                        <select name="musictype" id="musictype" class="musictype" ref="musictype" v-model="listParams.type">
                            <option :value="item.id" v-for="(item,index) in typelist" :key="index">{{item.title}}</option>
                        </select>
                        <span class="select-txt num-labe">选择几首：</span>
                        <select name="musicnum" id="musicnum" class="musicnum" v-model="listParams.size">
                            <option :value="item" v-for="(item,index) in numlist" :key="index">{{item}}</option>
                        </select>
                        <button class="choose-btn" @click="getBaiduMusicData">选择</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="baidu-music-content" ref="musiccontent">
            <img v-if="isShow" :src="musicimg" class="music-img" alt="">
            <ul v-else class="music-list">
                <li v-for="(item,index) in musiclist" :key="index" @click="getMusicPlay({id:item.song_id,title:item.title,img:item.pic_small,author:item.author})">
                    <div class="musciImg">
                        <img v-lazy="item.pic_big" alt="">
                    </div>
                    <p class="txt-title">{{item.title}}</p>
                    <div class="music-message">
                        <p>语言：{{item.language}}</p>
                        <p>地区：{{item.country}}</p>
                        <p>演唱：{{item.author}}</p>
                        <p>发行时间：{{item.publishtime}}</p>
                        <p>发行公司：{{item.si_proxycompany}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <form action="" @submit.prevent="handerEmailSub">
            <input type="text" id="input1">
            <button type="submit" class="">Sign Up</button>
        </form>
        <div>
            <ul style="display:flex;align-item:center;width:600px;margin:0 auto;">
                <li v-for="(item,key,index) in sortedTopics" :key="index" style="margin-right:10px;text-align:center;width:100%">{{item}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
import api from '@/module/api'
import URL from '@/module/baseUrl'
import PARAMS from '@/module/setParams'
import defaultImg from '@/src/assets/ico_music.png'
import MusicImg from '@/src/assets/ico_music_big.png'
export default {
    data() {
        return {
            musiclist:[],
            listParams:PARAMS.listParams,
            playParams:PARAMS.playParams,
            lrcParams:PARAMS.lrcParams,
            typeOptions:PARAMS.typeOptions,
            songurl:null,
            musicname:'请在右边选择您喜欢听的歌哦~~',
            musicSmallImg:'',
            dfImg:defaultImg,
            musicimg:MusicImg,
            typelist:PARAMS.typeOptions,
            numlist:[],
            songer:'',
            isfixed:false,
            isShow:true,
            isMes:true,
            obj:{
                "en": "英文",
                "de": "德文",
                "ja": "日文",
                "ch": "中文",
                "ar": "阿拉伯文"
            }
        }
    },
    computed: {
        
    },
    created(){
        this.getNumList()
        this.listParams.type = this.typeOptions[0].id
        this.listParams.size = this.numlist[0]
    },
    mounted(){//监听页面滚动事件
        this.$nextTick(()=>{
            window.addEventListener('scroll',this.positionFixed)
        })
    },
    destroyed() {//离开页面销毁这个监听事件
        window.removeEventListener('scroll', this.positionFixed)
    },
    computed:{
        sortedTopics() {
            return this.sortProperty('ch')
        }
    },
    methods: {
        sortProperty(prop) {
            var arr = Object.keys(this.obj) //key转换成数组
            var item = arr.splice(arr.indexOf(prop),1) //获得对输入的语言
            var newArr = item.concat(arr) //重新合并数组
            var newList = {}
            newArr.forEach(item => { //新数组对应原对像重新排序
                Object.keys(this.obj).forEach(key => {
                    if(item === key){
                        newList[key] = this.obj[key]
                    }
                })
            })
            return newList
        },
        getNumList(){
            for(let i=1;i<=70;i++){
                this.numlist.push(i)
            }
            return this.numlist
        },
        //音乐列表
        getBaiduMusicData(){
            if(this.listParams.type==0){
                alert('请选择音乐类型')
                return
            }
            this.musicname = '请点击下面选择你喜欢听的歌哦~~'
            this.songurl = null
            this.musicSmallImg = ''
            this.isMes = true
            let audio = document.querySelector('#mp3play')
            audio.pause()
            api({
                method:'get',
                url:URL.baiduUrl,
                params:this.listParams
            }).then(res=>{
                this.musiclist = [...res.data.song_list]
                this.isShow = false
            }).catch(error=>{
                console.log(error)
                this.isShow = false
            })
        },
        //播放
        getMusicPlay(options){
            this.playParams.songid = options.id
            this.musicname = options.title
            this.musicSmallImg = options.img
            this.songer = options.author
            this.isMes = false
            api({
                method:'get',
                url:URL.baiduUrl,
                params:this.playParams,
            }).then(res=>{
                this.songurl = res.data.bitrate.file_link
            }).catch(error=>{
                console.log(error)
            })
        },
        //歌词
        getMusicLrc(id){
            this.lrcParams.songid = id
            api({
                method:'get',
                url:URL.baiduUrl,
                params:this.lrcParams,
            }).then(res=>{
                console.log(res)
            }).catch(error=>{
                console.log(error)
            })
        },
        positionFixed(){
            let scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            let topHt = this.$refs.musictop.offsetHeight
            if(scroll>topHt){
                this.isfixed = true
                this.$refs.musiccontent.style.top = topHt*2+'px'
            }else{
                this.isfixed = false
                this.$refs.musiccontent.style.top = 0
            }
        },
        handerEmailSub(){
            let obj = document.getElementById('input1')
            if(obj.value==''){
                console.log('empty')
            }else{
                console.log(obj.value)
                let rex = /^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/
                if(rex.test(obj.value)==true){
                    console.log('succer')
                }else{
                    console.log('.....')
                    obj.value = ''
                }
            }
        }
    },
}
</script>

<style lang="less" scoped>
.baidu-audio{
    .fixed{
        position:fixed;
        top:0;
        left:0;
        z-index: 999;
        width:100%;
    }
    .music-top{
        background:#fff;
        .h1{
            width:100%;
            padding:20px 0;
            text-align:center;
            border-bottom:1px solid #f5f5f5;
            font-weight:bold;
        }
        .play-content{
            border-bottom: 1px solid #f5f5f5;
            padding:10px 0;
            .play-content-dev{
                display:flex;
                justify-content: flex-start;
                align-items: center;
                box-sizing: border-box;
                width:1000px;
                margin:0 auto;
                .play-content-dev-player{
                    width: 450px;
                    height: 80px;
                    display:flex;
                    justify-content: flex-start;
                    align-items: center;
                    .music-img-box{
                        width:80px;
                        height:80px;
                        border-radius:50%;
                        overflow: hidden;
                        border:1px solid #f5f5f5;
                        margin-right:10px;
                        img{width:100%}
                    }
                    .music-cont-box{
                        h2{font-weight:bold;padding-left:5px;}
                        .audio{
                            height: 30px;
                        }
                    }
                    
                }
            }
            .play-content-dev-select{
                display:flex;
                justify-content: flex-start;
                align-items: center;
                .musictype,.musicnum{
                    border:1px solid #f5f5f5;
                    height:40px;
                    font-size:16px;
                }
                .musictype{
                    width:150px;
                }
                .musicnum{
                    width:50px;
                }
                .select-txt{
                    font-size:16px;
                }
                .num-labe{
                    margin-left:20px;
                }
                .choose-btn{
                    background:#000;
                    color:#fff;
                    height:40px;
                    line-height: 40px;
                    text-align: center;
                    width:80px;
                    margin-left:20px;
                    border:none;
                    outline: none;
                    font-size:16px;
                }
            }
        }
    }
    
    .baidu-music-content{
        width:1000px;
        margin:0 auto;
        padding:10px 10px 10px 20px;
        box-sizing: border-box;
        border:1px solid #f5f5f5;
        border-top:none;
        position: relative;
        .music-img{
            display:block;
            width:200px;
            margin:50px auto;
        }
        .music-list{
            display:flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap:wrap;
            >li{
                width:20%;
                box-sizing:border-box;
                padding:0 10px 0 0;
                margin-top:10px;
                text-align: center;
                cursor:pointer;
                .musicImg{
                    width:100%;
                    .img{width:100%;border:none;display:block;}
                }
                .txt-title{
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                    font-size:16px;
                    margin-top:5px;
                }
                .music-message{
                    text-align:left;
                    font-size:12px;
                }
            }
        }
    }
}

</style>